<html>
<head>
<style>
@page {
  size: 21cm 9cm;
}
/* Unrelated workaround for bug where top/bottom margin
 * on page does not collapse correctly. */
p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}
</style>
</head>
<body style="border: 1px solid black;">
<div style="width:90%; line-height: 1.3;">
    <p>
        Some text.Some text.Some text.Some text.Some text.Some text.Some text.Some text.
        <span style="white-space: nowrap; border-bottom: 1px solid red;">This text should be at next line.</span>
        Other text. Other text. Other text. Other text. Other text. Other text. Other text.
    </p>
    <p>
        Some text.Some text.
        <span style="white-space: nowrap; border-bottom: 1px solid red;">This text should not be at next line.</span>
        Other text. Other text. Other text. Other text. Other text. Other text. Other text.
    </p>
    <p>
        Some text.Some text.Some text.Some text.Some text.Some text.Some text.Some text.
        <span style="white-space: nowrap; border-bottom: 1px solid red;">This is a very very very very very very very very very very very very very very very very very very very very very very long nowrap text.</span>
        Other text. Other text. Other text. Other text. Other text. Other text. Other text.
    </p>
</div>
</body>
</html>
